<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <style>
        .search {
            position: relative;
        }

        .js-input {
            width: 450px;
            height: 22px;
            line-height: 22px;
            font-size: 16px;
            padding: 8px;
            border: 1px solid #cccccc;
            outline: none;
        }

        .js-suggest {
            width: 466px;
            font-size: 14px;
            border: 1px solid #cccccc;
            background: #ffffff;
            position: absolute;
            left: 0;
            top: 39px;
        }

        .js-suggest.hide {
            display: none;
        }

        .js-suggest ul {
            display: block;
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .js-suggest ul li {
            color: #000;
            font: 14px arial;
            line-height: 25px;
            padding: 0 8px;
            position: relative;
            cursor: default;
        }

        .js-suggest ul li:hover {
            background: #f0f0f0;
        }
    </style>
</head>

<body>
    <div class="search">
        <div><input type="text" class="js-input" value="的"></div>
        <div class="js-suggest">
            <ul>
                <li>根据输入框的值</li>
                <li>从给定字符串数组中筛选出匹配的数据，依次显示在li节点中</li>
                <li>如果没有匹配的数据，请移除所有li节点，并隐藏.js-suggest节点</li>
            </ul>
        </div>
    </div>
    <!-- 
        本题展示了一个简化版的搜索框智能提示功能，请按照如下要求完成suggest函数。
        1、当输入框的值发生变化时，系统会调用suggest函数，用于显示/隐藏智能提示数据，参数items为一个字符串数组。
        2、当items中的字符串和输入框的值匹配时，将匹配的数据依次渲染在ul下的li节点中，并显示.js-suggest节点，否则移除ul下的所有li节点，并隐藏.js-suggest节点
        3、输入框的值需要移除两侧空白再进行匹配
        4、输入框的值为空时，按照全部不匹配处理
        5、字符串使用模糊匹配，比如"北大"能匹配"北大"和"北京大学"，但不能匹配"大北京"，即按照 /北.*?大.*?/ 这个正则进行匹配
        6、通过在.js-suggest节点上添加/移除 hide 这个class来控制该节点的隐藏/显示
        7、当前界面是执行 suggest(['不匹配数据', '根据输入框的值', '从给定字符串数组中筛选出匹配的数据，依次显示在li节点中', '如果没有匹配的数据，请移除所有li节点，并隐藏.js-suggest节点']) 后的结果
        8、请不要手动修改html和css
        9、不要使用第三方插件
        10、请使用ES5语法
     -->
    <script type="text/javascript">
        function suggest(items) {
            let ipt = document.querySelector('.js-input').value;
            let dv = document.querySelector('.js-suggest');
            let ul = document.querySelector('ul');
            let len = ul.children.length;
            // 清空ul
            for (let i = 0; i < len; i++) {
                let li = document.querySelector('li');
                ul.removeChild(li);
            }
            ipt = ipt.trim();
            // 输入为空
            if (!ipt) {
                dv.classList.add('hide');
                return;
            }

            // 构造reg的时候，ipt如果是特殊字符，要转义
            let reg = '';
            const regKey = ['(', ')', '.', '?', '^', '/', '\\', '*', '[', ']', '|', '+', '{', '}', '$'];
            console.log(regKey.length);
            for (i of ipt) {
                if (regKey.includes(i)) {
                    i = '\\' + i;
                }
                reg += i + '.*?';
            }
            // console.log(reg);
            reg = new RegExp(reg);

            // 匹配
            for (i of items) {
                if (reg.test(i)) {
                    let tip = document.createElement('li');
                    tip.innerHTML = i;
                    ul.appendChild(tip);
                }
            }
            dv.appendChild(ul);

            // 要考虑ipt不为空但是没有匹配到
            if (ul.children.length) {
                dv.classList.remove('hide');
            } else {
                dv.classList.add('hide');
            }
        }
        /*
        function suggest(items) {
            var input = document.querySelector('.js-input');
            const regKeys = ['(', ')', '.', '?', '^', '/', '\\', '*', '[', ']', '|', '+', '{', '}', '$'];
            // ul 初始化, 清除所以li
            var suggestContent = document.querySelector('.js-suggest')
            while (suggestContent.children[0].children.length > 0) {
                suggestContent.children[0].children[0].remove();
            }
            // console.log(items);
            var value = input.value.trim();
            var charArray = value.split('');
            for (var i = 0; i < charArray.length; i++) {
                if (regKeys.includes(charArray[i])) {
                    charArray[i] = '\\' + charArray[i];
                }
            }
            // var reg = RegExp(charArray.join('.*?') + '.*?','g');  // 不能用
            var reg = RegExp(charArray.join('.*?') + '.*?');
            console.log(reg);
            // console.log(reg.test('110'));
            if (!value) {
                suggestContent.className = 'js-suggest hide';
                return;
            }
            items.forEach(function(item, index) {
                console.log(item, reg.test(item));
                console.log(item, reg.test(item));
                if (reg.test(item)) {
                    console.log('匹配成功', item);
                    var li = document.createElement('li');
                    li.innerHTML = item;
                    suggestContent.children[0].appendChild(li);
                }
            });
            if (suggestContent.children[0].children.length === 0) {
                suggestContent.className = 'js-suggest hide';
            } else {
                suggestContent.className = 'js-suggest';
            }
            console.log(suggestContent.className.indexOf('hide'));
            console.log(suggestContent.children[0]);
            console.log(suggestContent.children[0].children.length);
        }
        */
    </script>
</body>

</html>